<template>
  <div class="map-page">
    <div class="pageContemt">
      <div class="mapDetail">
        <div class="befor"></div>
        <div class="after"></div>
        <div class="forwardChinaClass" v-if="mapName !== 'china'" @click="forwardChina"><Icon type="ios-contract" /></div>
        <div class="map" ref="map"></div>
      </div>
      <div class="companyDetail">
        <div class="befor"></div>
        <div class="after"></div>
        <div class="area">{{mapName == 'china' ? '中国区域内' : mapName + '区域内'}}</div>
        <div class="company" v-for="(item,index) in tableDatas" :key="index">
          <div class="companyName">{{item.companyName}} <span style="color: #80DAF8" v-if="item.approvedAt">({{item.approvedAt}})</span></div>
        </div>
        <div class="noCompany" v-if="allCompany.length == 0">该区域暂无公司</div>
        <div class="processParaPage">
          <Page :total="total" :page-size="pageSize" :current="page" @on-change="changePage"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import { cityMap, provinceMap, special } from "./maps/map-data";
  export default {
    data: () => ({
      dataList: [],
      myChart: {},
      mapdata: [],
      mapName: "china",
      cityList: {},
      regions:[],
      colorArr: [
        {
          r: 255,
          g: 228,
          b: 195,
        },{
          r: 237,
          g: 228,
          b: 214,
        },{
          r: 255,
          g: 210,
          b: 227,
        },{
          r: 221,
          g: 219,
          b: 236,
        },{
          r: 255,
          g: 252,
          b: 220,
        },
      ], // 5
      tableDatas: [],
      allCompany: [],
      province: '',
      city: '',
      total: 0,
      page: 1,
      pageSize: 10,
    }),
    computed: {
      opt() {
        return {
          // backgroundColor: '#404a59',
          title: {
            top:20,
            text: "区域工厂分布",
            subtext: "",
            x: 'center',
            textStyle: {
              color: "#78B8FB",
            },
          },
          tooltip: {
            trigger: "item",
            formatter(params){
              return params.name;
            }
          },
          // geo: {
          //   type: "map",
          //   map: this.mapName,
          //   zoom: 1,
          //   scaleLimit:{min:0,max:3}, // 缩放级别
          //   label: {
          //     normal: {
          //       show: true,
          //       textStyle: {
          //         color: '#F4E925',
          //         shadowBlur: 10,
          //         shadowColor: '#05C3F9'
          //       },
          //     },
          //     emphasis: {
          //       show: true,
          //       textStyle: {
          //         color: "#fff",
          //         fontSize: 13,
          //       },
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       areaColor: 'transparent',
          //       borderColor: '#3fdaff',
          //       borderWidth: 2,
          //       shadowColor: 'rgba(63, 218, 255, 0.5)',
          //       shadowBlur: 30
          //     },
          //   },
          //   regions: this.regions,
          //   data: this.mapdata,
          // },
          textStyle: {
            fontFamily: 'KaiTi',
            fontSize: 14,
            fontWeight: 600
          },
          series: [{
            type: 'map',
            mapType: this.mapName,
            // aspectScale: 0.75,
            zoom: 1.2, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: { //滚轮缩放的极限控制
              min: 0.75,
              max: 3
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#dd463b',
                  shadowBlur: 6,
                  shadowColor: 'rgb(181, 169, 205)',
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
            },
            itemStyle: {
              normal: {
                // areaColor: 'transparent',
                // borderColor: '#3fdaff',
                borderColor: '#aaa',
                borderWidth: 1,
                shadowColor: 'rgba(255,255,255,0.2)',
                shadowBlur: 4,
                shadowOffsetY: -5,
              },
            },
            data: this.regions,
          }],
        };
      },
    },
    mounted() {
      this.init();
      this.loadList();
      this.changePage();
    },
    methods: {
      init() {
        // 初始化 echarts
        this.myChart = echarts.init(this.$refs.map);
        let chinaMap = require("./maps/china.json");
        chinaMap.features.forEach((v) => {
          let Num = Math.floor(Math.random() * 5)
          let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          let itemStyle = {
            normal: {
              areaColor: color,
              shadowBlur: 0
            }
          };
          this.mapdata.push({ name: v.properties.name,color });
          this.regions.push({ name: v.properties.name ,itemStyle });
        });
        echarts.registerMap("china", chinaMap);
        this.myChart.setOption(this.opt,true);
        this.myChart.on("click", this.clickHandler);
      },
      clickHandler(params) {
        let name = params.name;
        this.mapdata = [];
        this.regions = [];

        if (name in provinceMap) {
          // 如果点击的是34个省、市、自治区，绘制选中地区的二级地图
          let _provinceMap = provinceMap;
          let province = require(`./maps/province/${_provinceMap[name]}`);

          province.features.forEach((v) => {
            let Num = Math.floor(Math.random() * 5)
            let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
            let itemStyle = {
              normal: {
                areaColor: color,
                shadowBlur: 0
              }
            };
            this.mapdata.push({ name: v.properties.name,color });
            this.regions.push({ name: v.properties.name ,itemStyle });
          });
          echarts.registerMap(name, province);
          this.mapName = name;
          this.province = name.indexOf('省') > 0 ? name : name + '省';
          this.city = '';
          this.loadList();
          this.updateChart();
        } else if (name in cityMap) {
          let _cityMap = cityMap;
          this.mapName = name;
          // 如果是【直辖市/特别行政区】只有二级下钻
          if (special.indexOf(name) >= 0) {
            this.mapName = name;
            this.city = name;
            this.loadList();
            this.updateChart();
          } else {
            this.city = name;
            this.loadList();
            // 显示县级地图
            // let city = require(`./maps/city/${_cityMap[name]}.json`);
            // city.features.forEach((v) => {
            //   let color = `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},0.5)`;
            //   let itemStyle = {
            //     normal: {
            //       areaColor: color
            //     }
            //   };
            //   this.mapdata.push({ name: v.properties.name });
            //   this.regions.push({ name: v.properties.name ,itemStyle});
            // });
            // echarts.registerMap(name, city);
            // this.mapName = name;
            // this.updateChart();

            // this.mapName = "china";
            // let chinaMap = require("./maps/china.json");
            // chinaMap.features.forEach((v) => {
            //   let Num = Math.floor(Math.random() * 5)
            //   let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
            //   let itemStyle = {
            //     normal: {
            //       areaColor: color,
            //       shadowBlur: 0
            //     }
            //   };
            //   this.mapdata.push({ name: v.properties.name,color });
            //   this.regions.push({ name: v.properties.name ,itemStyle });
            // });
            // echarts.registerMap("china", chinaMap);
            // this.updateChart();
          }
        } else {
          // this.mapName = "china";
          // let chinaMap = require("./maps/china.json");
          // chinaMap.features.forEach((v) => {
          //   let Num = Math.floor(Math.random() * 5)
          //   let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          //   let itemStyle = {
          //     normal: {
          //       areaColor: color,
          //       shadowBlur: 0
          //     }
          //   };
          //   this.mapdata.push({ name: v.properties.name,color });
          //   this.regions.push({ name: v.properties.name ,itemStyle });
          // });
          // echarts.registerMap("china", chinaMap);
          // this.updateChart();
        }
      },
      async updateChart() {
        this.myChart.setOption(this.opt,true);
      },
      forwardChina(){
        this.mapName = "china";
        this.mapdata = [];
        this.regions = [];
        this.province = '';
        this.city = '';
        let chinaMap = require("./maps/china.json");
        chinaMap.features.forEach((v) => {
          let Num = Math.floor(Math.random() * 5)
          let color = `rgba(${this.colorArr[Num].r},${this.colorArr[Num].g},${this.colorArr[Num].b},1)`;
          let itemStyle = {
            normal: {
              areaColor: color,
              shadowBlur: 0
            }
          };
          this.mapdata.push({ name: v.properties.name,color });
          this.regions.push({ name: v.properties.name ,itemStyle });
        });
        echarts.registerMap("china", chinaMap);
        this.loadList();
        this.updateChart();
      },
      loadList(){
        // this.getCompanyByArea({
        //   province : this.province,
        //   city : this.city,
        //   success: res => {
        //     this.allCompany = res.data;
        //     this.total = this.allCompany.length;
        //     this.tableDatas = this.allCompany.slice(0, 10);
        //   },
        //   failure: data => {
        //     this.$Modal.error({
        //       title: data.msg,
        //       okText: '知道了',
        //     });
        //   },
        // })
      },
      changePage(page){
        this.page = page;
        let pre = (page - 1)*10;
        let next = page * 10;
        this.tableDatas = this.allCompany.slice(pre, next);
      },
    },
  };
</script>

<style lang="less" scoped>
  .map-page{
    width: 100%;
    padding: 50px;
    background: #081832;
    .pageContemt{
      width: 100%;
      text-align: center;
      height: 700px;
      margin-bottom: 50px;
      .mapDetail{
        display: inline-block;
        vertical-align: top;
        width: 800px;
        height: 700px;
        border: 1px solid #216bba;
        position: relative;
        .befor{
          &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-top: 2px solid #216bba;
            border-left: 2px solid #216bba;
            left: 0px;
            top: 0px;
          }
          &::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-top: 2px solid #216bba;
            border-right: 2px solid #216bba;
            right: 0px;
            top: 0px;
          }
        }
        .after{
          &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-bottom: 2px solid #216bba;
            border-left: 2px solid #216bba;
            left: 0px;
            bottom: 0px;
          }
          &::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-bottom: 2px solid #216bba;
            border-right: 2px solid #216bba;
            right: 0px;
            bottom: 0px;
          }
        }
        .forwardChinaClass{
          cursor: pointer;
          z-index: 998;
          position: absolute;
          left: 30px;
          top: 30px;
          .ivu-icon-ios-contract {
            font-size: 36px;
            font-weight: 500;
            color: #fff;
          }
        }
        .map{
          width: 100%;
          height: 100%;
        }
      }
      .companyDetail{
        display: inline-block;
        vertical-align: top;
        margin: 0 30px;
        min-width: 300px;
        height: 700px;
        border: 1px solid #216bba;
        position: relative;
        .befor{
          &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-top: 2px solid #216bba;
            border-left: 2px solid #216bba;
            left: 0px;
            top: 0px;
          }
          &::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-top: 2px solid #216bba;
            border-right: 2px solid #216bba;
            right: 0px;
            top: 0px;
          }
        }
        .after{
          &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-bottom: 2px solid #216bba;
            border-left: 2px solid #216bba;
            left: 0px;
            bottom: 0px;
          }
          &::after{
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border-bottom: 2px solid #216bba;
            border-right: 2px solid #216bba;
            right: 0px;
            bottom: 0px;
          }
        }
        .area{
          padding: 20px;
          border-bottom: 1px solid rgba(33,107,186,1);
          color: #78B8FB;
          text-align: center;
          font-size: 22px;
        }
        .company{
          margin-top: 20px;
          .companyName{
            margin: 20px;
            color: #F2F4F6;
            font-size: 14px;
          }
        }
        .noCompany{
          width: 100%;
          text-align: center;
          margin-top: 50px;
          color: #F2F4F6;
          font-size: 14px;
        }
        .processParaPage{
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          /deep/li{
            background: rgba(255,255,255,0)!important;
            border: none!important;
          }
        }
      }
    }
  }
</style>
